<template>
	<view class="address-info">
		<form @submit="formSubmit">
			<view class="content">
				<view class="content-name">
					<view class="name">姓名</view>
					<input type="text" placeholder="收货人姓名" v-model="name" name="name" />
				</view>
				<view class="hr"></view>
				<view class="content-phone">
					<view class="phone">手机号</view>
					<input type="text" placeholder="收货人手机号" v-model="phone" name="phone" />
				</view>
				<view class="hr"></view>
				<view class="content-address">
					<view class="address">所在地区</view>
					<view class="city" @click="openCityPick">{{cityData}}</view>
				</view>
				<view class="hr"></view>
				<view class="content-address">
					<view class="address">详细地址</view>
					<input type="text" placeholder="详细地址" v-model="address" name="address" />
				</view>
				<view class="hr"></view>
			</view>
			<view class="is-default">
				<up-checkbox label="设置为默认地址" shape="circle" size="12" usedAlone v-model:checked="ckDefault">
				</up-checkbox>
			</view>
			<button form-type="submit" class="btn-submit">保存并使用</button>
		</form>
	</view>
	<cityPicker :column="3" default-value="110101" :mask-close-able="true" @confirm="confirm" @cancel="cancel" :visible="visible"/>
</template>

<script setup>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		ref,
		watch
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		post
	} from '@/hooks/req.js'
	import {
		useUserStore
	} from '../../store';
	let useUserInfo = useUserStore()
	const name = ref('')
	const phone = ref('')
	const address = ref('')
	const ckDefault = ref(false)
	const isDefault = ref(1)
	const editData = ref()
	const visible = ref(false)
	const cityData = ref('')
	const openCityPick=()=>{
		visible.value=true
	}
	const confirm=(val)=>{
		cityData.value=val.name
		visible.value=false
	}
	const cancel =()=>{
		visible.value=false
	}
	watch(ckDefault, () => {
		if (ckDefault.value) {
			isDefault.value = 0
		} else {
			isDefault.value = 1
		}
	});
	const formSubmit = (e) => {
		if (!name.value) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return;
		}
			
		if(name.value.length<2){
			uni.showToast({
				title: '请输入至少2个字',
				icon: 'none'
			})
			return;
		}
		if (!phone.value) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return;
		}
		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
			uni.showToast({
				title: '手机号需要正确格式11位',
				icon: 'none'
			})
			return;
		}
		if(!cityData.value){
			uni.showToast({
				title: '请选择所在地区',
				icon: 'none'
			})
			return;
		}
		if (!address.value) {
			uni.showToast({
				title: '请输入收货地址',
				icon: 'none'
			})
			return;
		}
		const address_id = editData.value && editData.value.id ? editData.value.id : null;
		const values = {
			id: address_id,
			userId: useUserInfo.userInfo.id,
			city:cityData.value,
			address:e.detail.value.address,
			name: e.detail.value.name,
			phone: e.detail.value.phone,
			isDefault: isDefault.value
		}
		post("/address/update", values, uni.getStorageSync("token")).then(res => {
			uni.showToast({
				title: "保存成功",
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		})
	}
	
	onLoad((e) => {
		if (e.editData) {
			const jsonString = e.editData
			editData.value = JSON.parse(jsonString)
			name.value = editData.value.name
			phone.value = editData.value.phone
			cityData.value = editData.value.city
			address.value = editData.value.address
			if (editData.value.isDefault == 1) {
				ckDefault.value = false
			} else {
				ckDefault.value = true
			}
			uni.setNavigationBarTitle({
				title: "编辑收货地址",
			})
		} else {
			uni.setNavigationBarTitle({
				title: "新增收货地址",
			})
		}
	})
</script>

<style lang="scss" scoped>
	.address-info {
		padding: 10px;
		height: 95vh;
		background-color: #F6F6F6;

		.content {
			background-color: #FFFFFF;
			border-radius: 5px;
			padding: 10px;

			.hr {
				margin: 10px 0;
				height: 1px;
				background-color: #ededed;
			}

			.content-name {
				display: flex;

				.name {
					width: 80px;
				}
			}

			.content-phone {
				display: flex;

				.phone {
					width: 80px;
				}
			}

			.content-address {
				display: flex;

				.address {
					width: 80px;
				}
				input {
					flex: 1;
				}
				.city{
					flex:1;
				}
			}
		}

		.btn-submit {
			background-color: #ff6700;
			color: white;
		}
	}
</style>